<template>
    <div class="edit-box" teleport="body">
        <h1>修改管理员信息</h1>
        <el-form :model="admin" label-width="120px">
            <el-form-item label="id">
                <span>{{ admin.id }}</span>
            </el-form-item>
            <el-form-item label="名称">
                <span>{{ admin.name }}</span>
            </el-form-item>
            <el-form-item label="时间">
                <span>{{admin.time}}</span>
            </el-form-item>
            <el-form-item label="账号">
                <el-input v-model="admin.ip" />
            </el-form-item>
            <el-form-item label="角色">
                <el-input v-model="admin.role" />
            </el-form-item>
            <el-form-item label="添加人">
                <el-input v-model="admin.addname" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveFn">修改</el-button>
                <el-button type="primary" @click="cancleFn">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
      
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { reactive, watch ,ref} from 'vue'

import service from '@/utils/request'

//声明属性
const props = defineProps<{
    id: any
}>()


//声明事件
const emit = defineEmits<{
    (e: "hide"): void
    (e: "updatesuccess"): void
}>()

interface IAdmin {
    "id": number,
    "name": string,
    "ip": number,
    "role": string,
    "status": boolean,
    "addname": string,
    "time": string
}


var admin = reactive<IAdmin>({
    "id": 1,
    "name": '',
    "ip": 17339811909,
    "role": '',
    "status": true,
    "addname": '',
    "time": '2023-04-15'
})

//取消
const cancleFn = () => {
    //触发隐藏事件
    emit("hide");
}


//获取管理员的信息:根据aid进行获取
const getAdminDetail = () => {
    service({
        url: "http://localhost:3000/staff",
        params: {
            id: props.id
        }
    }).then(res => {
            console.log(res.data);
            admin.name = res.data[0].name;
            admin.ip = res.data[0].ip;
            admin.role = res.data[0].role;
            admin.addname = res.data[0].addname;
            admin.time = res.data[0].time;
            admin.status = res.data[0].status;
    })
}
getAdminDetail()

watch(props, () => {
    getAdminDetail();
}, {
    deep: true
})

//修改
const saveFn = () => {
    service({
        // url: "http://localhost:3000/bannerlist",
        url: `http://localhost:3000/staff/${props.id}`,
        method: "patch",
        data: {
            ip: admin.ip,
            role: admin.role,
            addname:admin.addname
        }
    })
        .then(res => {
                ElMessage({
                    message: "修改成功,宝子!",
                    type: "success"
                })
                // getAdminDetail()
                emit("hide");
                emit("updatesuccess");
        })
}
</script>
      
<style scoped>
.edit-box {
    width: 400px;
    height: 300px;
    border: 1px solid #ededed;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(241, 205, 211, 0.842);
    z-index: 999;
}
</style>